<template>
  <div class="app-container">
    <router-link :to="'/scenic/addImg/' + tableData.id">
     <el-button type="primary" >新增景点图片</el-button>
    </router-link>
    <el-table :data="tableData.imgList" border style="width: 100%">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{
          (page - 1) * size + scope.$index + 1
        }}</template>
      </el-table-column>
      <!-- <el-table-column prop="" label="景点名" width="100">
      </el-table-column> -->
      <el-table-column prop="spotImg" label="景点图片地址" width="600">
        <!--TODO 图片上传-->
        <template slot-scope="scope">
          <el-input v-model="scope.row.spotImg" ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="图片预览" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.spotImg" style="height:200px"/>
        </template>
      </el-table-column>

      <el-table-column label="图片状态(1:正常,2:停用,3:删除)"  width="300">
        <!-- <el-select v-model="searchScenic.status == 0 ? '请选择' : searchScenic.status" placeholder="景点状态">
          <el-option label="正常" value=1></el-option>
          <el-option label="停用" value=2></el-option>
          <el-option label="删除" value=3></el-option>
        </el-select> -->
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.status" style="width:100px" disabled="true"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="100">
        　　　　<template slot-scope="scope">
          
            　　　　　　<el-button
              type="primary"
              @click="modifyScenic(scope.row.id,scope.row.status,scope.row.spotImg)"
              icon="el-icon-edit"
              title="编辑景点"
              circle
            ></el-button>
          　　　　　　<el-button
            type="danger"
            @click="deleteScenic(scope.row.id)"
            icon="el-icon-delete"
            title="删除景点"
            circle
          ></el-button>
          　　　　</template
        >
        　　
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import scenic from "@/api/travel/scenic/scenic";

export default {
  data() {
    return {
      selectString: "请选择",
      selectArr: [
        { id: 1, name: "正常" },
        { id: 2, name: "停用" },
        { id: 3, name: "删除" },
        { id: 0, name: "全部" },
      ],
      page:1,
      size:9,
      tableData: [
        {
          id: 2,
          title: "福州三2",
          addr: "福建省福州市鼓楼区道山路附近",
          price: 0,
          playTime: "12",
          openTime: "08:30-20:30",
          culture:
            "由三个坊、七条巷和一条中轴街肆组成，因此自古就被称为“三坊七巷”",
          history:
            "曾先后走出过如严复、陈宝琛、林觉民和林长民等中国近代史上众多名人。",
          descript:
            "三坊七巷是国家5A级旅游景区，是福州老城区经历了建国后的拆迁建设后留存下来的历史街区之一。是福州的历史之源、文化之根、文脉昌盛之地。",
          status: 1,
          imgList: [],
        },
      ],
    };
  },
  create() {
    this.init();
  },

  //路由监听
  watch: {
    //路由变化，以下方法执行
    $route(to, from) {
      this.init();
    },
  },
  beforeRouteEnter(to, from, next) {
    // console.log(this, 'beforeRouteEnter'); // undefined
    // console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
    // console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
    // console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
    next((vm) => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm); //当前组件的实例
      vm.init();
    });
  },
  methods: {
    deleteScenic(id){
      this.$confirm("此操作将删除该景点图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确定删除
          scenic
            .deleteScenicImgById(id)
            .then((response) => {
              //删除成功
              //提示删除成功
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //刷新列表
              this.getScenicInfoById(this.page);
            })
            .catch((error) => {
              console.log(error)
              //删除失败
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {
          //取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改下拉选择
    changeValue(value) {
      console.log(value);
      console.log(this.selectString);
      this.tableData.status = value.id;
      console.log(this.searchScenic);
    },
    //初始化
    init() {
      //判断路径是否有id值
      if (this.$route.params && this.$route.params.id) {
        this.tableData.id = this.$route.params.id;
        this.getScenicInfoById(this.tableData.id);
      }
    },
    getScenicInfoById(id) {
      scenic.getScenicInfoById(id).then((response) => {
        console.log(response);
        this.tableData = response.data.data[0];
        console.log(this.tableData);
      });
    },
    modifyScenic(id,status,spotImg){
      console.log(id)
      console.log(status)
      console.log(spotImg)
      this.$confirm("此操作将修改该景点图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          scenic.updateScenicSpotImg(id,status,spotImg).then(response =>{
              //提示成功
            this.$message({
                    type: 'success',
                    message: '修改景点图片信息成功!'
            });
          })
        })
        .catch(() => {
          //取消删除
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });

    }
  },
};
</script>